<template>
  <a-modal
    v-model:visible="visible"
    :title="`关键词规则名称：${KeywordDetail?.extraction_word}`"
    @calcel="onClose"
    width="1000px"
    centered
  >
    <div class="container">
      <!-- 顶部搜索 -->
      <a-row type="flex" style="padding-left: 30px">
        <a-col style="display: flex; align-items: center">
          <span style="margin-right: 10px">长尾关键词</span>
          <a-input
            placeholder="长尾关键词"
            style="width: 300px"
            v-model:value="word"
            @change="handleSearch"
          >
          </a-input>
        </a-col>
        <a-col :offset="1">
          <a-space>
            <a-button type="primary" @click="getKeyWordsMergeList()">
              搜索
            </a-button>
            <a-button @click="resetHandle"> 重置 </a-button>
          </a-space>
        </a-col>
      </a-row>
      <!-- 列表操作按钮 -->
      <a-row style="margin-top: 20px">
        <a-space>
          <a-button type="primary" size="middle" @click="refrashHandle"
            ><sync-outlined
          /></a-button>
          <a-button type="primary" size="middle" @click="addHandle"
            ><plus-outlined />添加</a-button
          >
          <a-button
            type="primary"
            ghost
            :disabled="!selectedRowKeys.length"
            @click="delSelectHandle"
            :loading="delLoading"
            ><delete-outlined />删除<span v-if="selectedRowKeys.length">{{
              selectedRowKeys.length
            }}</span></a-button
          >
        </a-space>
      </a-row>
      <!-- 列表 -->
      <div style="margin-top: 20px" class="table_box">
        <a-table
          :row-selection="{
            selectedRowKeys: selectedRowKeys,
            onChange: onSelectChange,
          }"
          :rowKey="(record) => record.id"
          :columns="columns"
          :pagination="false"
          :data-source="data"
          :loading="tableLoading"
        >
          <template #bodyCell="{ column, record }">
            <template v-if="column.key == 'merge_keyword'">
              <span>{{ record?.merge_keyword?.slice(0, 20) || "-" }}</span>
              <template v-if="record?.merge_keyword?.trim().length > 20">
                <a-popover>
                  <template #content>
                    {{ record?.merge_keyword }}
                  </template>
                  <ellipsis-outlined style="margin-left: 3px" />
                </a-popover>
              </template>
            </template>
            <template v-if="column.key == 'merge_type_txt'">
              <a-tag color="#dc8e0e" v-if="record.merge_type_txt">{{
                record.merge_type_txt
              }}</a-tag>
              <span v-else>-</span>
            </template>
            <template v-if="column.dataIndex === 'action'">
              <a-space>
                <a-button
                  type="primary"
                  size="small"
                  @click="editItemHandle(record)"
                  >编辑</a-button
                >
                <a-button
                  type="primary"
                  ghost
                  size="small"
                  @click="delItemHandle(record)"
                  >删除</a-button
                >
              </a-space>
            </template>
          </template>
        </a-table>
      </div>
      <a-row
        type="flex"
        justify="space-between"
        style="margin-top: 30px; align-items: center"
      >
        <a-col>
          显示第 {{ page > 1 ? (page - 1) * pageSize + 1 : 1 }} 到第
          {{ page * pageSize }} 条记录，总共 {{ total }} 条记录 每页显示{{
            pageSize
          }}条记录
        </a-col>
        <a-col>
          <a-pagination
            size="small"
            v-model:current="page"
            v-model:pageSize="pageSize"
            :total="total"
            show-size-changer
            show-quick-jumper
            @change="pagesChange"
          />
        </a-col>
      </a-row>
    </div>
    <template #footer>
      <a-button @click="onClose" type="primary">关闭</a-button>
    </template>
  </a-modal>
  <AddThesaurus ref="addThesaurus" @success="getKeyWordsMergeList()" />
</template>

<script>
import {
  defineComponent,
  reactive,
  toRefs,
  computed,
  watch,
  nextTick,
  ref,
  onMounted,
  createVNode,
} from "vue";
import {
  PlusOutlined,
  DeleteOutlined,
  SyncOutlined,
  ExclamationCircleOutlined,
  EllipsisOutlined,
} from "@ant-design/icons-vue";
import AddThesaurus from "./addThesaurus.vue";
import request from "@/common/utils/request";
import _ from "lodash";
import { message, Modal } from "ant-design-vue";
export default defineComponent({
  components: {
    PlusOutlined,
    DeleteOutlined,
    SyncOutlined,
    AddThesaurus,
    ExclamationCircleOutlined,
    EllipsisOutlined,
  },
  setup() {
    const state = reactive({
      visible: false,
      columns: [
        {
          title: "长尾关键词",
          dataIndex: "merge_keyword",
          key: "merge_keyword",
          align: "center",
        },
        {
          title: "类型",
          dataIndex: "merge_type_txt",
          key: "merge_type_txt",
          align: "center",
        },
        {
          title: "操作",
          dataIndex: "action",
          key: "action",
          align: "center",
        },
      ],
      data: [], //表格数据
      selectedRowKeys: [], //选中列表
      total: 0,
      page: 1,
      pageSize: 10,
      addThesaurus: null, //添加词库组件实例
      KeywordDetail: null, //父组件详情
      tableLoading: false,
      word: "", //关键词模糊搜索
      delLoading: false, //删除loading
    });

    const showModal = (info) => {
      state.visible = true;
      state.KeywordDetail = info;
      getKeyWordsMergeList();
    };
    // 获取列表
    const getKeyWordsMergeList = () => {
      state.tableLoading = true;
      let params = {
        page: state.page,
        pageSize: state.pageSize,
        ai_keyword_id: state.KeywordDetail.id,
        word: state.word,
      };
      request
        .get("/work_ai", "/user/filmrelease/ai/keywordMerge/list", params)
        .then((successRes) => {
          state.tableLoading = false;
          state.data = successRes.result.data;
          state.total = successRes.result.total;
        })
        .catch((errorRes) => {
          state.tableLoading = false;
        });
    };
    const onSelectChange = (selectedRowKeys) => {
      state.selectedRowKeys = selectedRowKeys;
    };
    const pagesChange = (page, pageSize) => {
      state.page = page;
      state.pageSize = pageSize;
      getKeyWordsMergeList();
    };
    const onClose = () => {
      state.visible = false;
      initData();
    };
    // 添加长尾关键词
    const addHandle = () => {
      state.addThesaurus &&
        state.addThesaurus.showModal({
          KeywordDetail: state.KeywordDetail,
        });
    };
    //   编辑长尾关键词
    const editItemHandle = (info) => {
      state.addThesaurus &&
        state.addThesaurus.showModal({
          KeywordDetail: state.KeywordDetail,
          editDetail: info,
        });
    };
    // 模糊搜索
    const handleSearch = _.debounce(() => {
      getKeyWordsMergeList();
    }, 1000);
    // 初始化数据
    const initData = () => {
      state.word = "";
      state.selectedRowKeys = [];
    };
    // 重置
    const resetHandle = () => {
      initData();
      getKeyWordsMergeList();
    };
    // 刷新
    const refrashHandle = _.debounce(() => {
      initData();
      getKeyWordsMergeList();
    }, 1000);
    // 删除选中项
    const delSelectHandle = () => {
      if (!state.selectedRowKeys.length) {
        return message.warning("请选则删除项");
      }
      Modal.confirm({
        title: "删除长尾关键词",
        icon: createVNode(ExclamationCircleOutlined),
        content: `确定删除${state.selectedRowKeys.length}条长尾关键词吗?`,
        okText: "确认",
        cancelText: "取消",
        onOk() {
          let params = {
            ids: state.selectedRowKeys.join(","),
          };
          state.delLoading = true;
          request
            .del("/work_ai", "/user/filmrelease/ai/keywordMerge/delete", params)
            .then((successRes) => {
              message.success("删除成功");
              state.delLoading = false;
              initData();
              getKeyWordsMergeList();
            })
            .catch((errorRes) => {
              state.delLoading = false;
            });
        },
        onCancel() {},
      });
    };
    // 单个删除
    const delItemHandle = (info) => {
      Modal.confirm({
        title: "删除长尾关键词",
        icon: createVNode(ExclamationCircleOutlined),
        content: `确定删除吗?`,
        okText: "确认",
        cancelText: "取消",
        onOk() {
          let params = {
            ids: `${info.id}`,
          };
          request
            .del("/work_ai", "/user/filmrelease/ai/keywordMerge/delete", params)
            .then((successRes) => {
              message.success("删除成功");
              initData();
              getKeyWordsMergeList();
            })
            .catch((errorRes) => {});
        },
        onCancel() {},
      });
    };

    return {
      ...toRefs(state),
      showModal,
      onClose,
      pagesChange,
      addHandle,
      getKeyWordsMergeList,
      onSelectChange,
      handleSearch,
      delSelectHandle,
      refrashHandle,
      initData,
      delItemHandle,
      resetHandle,
      editItemHandle,
    };
  },
});
</script>

<style lang="less" scoped>
.table_box {
  max-height: 500px;
  overflow-y: auto;

  &::-webkit-scrollbar {
    width: 8px;
    /* 滚动条的宽度 */
    height: 10px;
    /* 滚动条的高度，垂直滚动条可能用得上 */
    background-color: #eeeeee;
  }

  &::-webkit-scrollbar-thumb {
    // background: #888;
    /* 滑块的背景颜色 */
    border-radius: 10px;
    /* 滑块的圆角 */
  }
}

.pagination {
  margin-top: 30px;
}
</style>
